<template>
  <div id="myPassword" class="card">
      <div class="card-header" >
          密码修改
      </div>
      <div class="card-body" id="divPassword">
          <form id="frmUpdatePassword" class="form-horizontal">
          <div class=" row">
              <label class="control-label col-2 ms-auto text-right">当前用户</label>
              <div class="col-4 me-auto">
                  {{username}}
              </div>
          </div>
          <div class=" row">
              <label class="control-label col-2 ms-auto text-right">当前密码</label>
              <div class="col-4 me-auto">
                  <input type="password" name="currentPassword" class="form-control" v-model.trim="curPassword" />
              </div>
          </div>
          <div class=" row">
              <label class="control-label col-2 ms-auto text-right">新密码</label>
              <div class="col-4 me-auto">
                  <input type="password" name="newPassword" class="form-control" v-model.trim="newPassword" />
              </div>
          </div>
          <div class=" row">                        
              <label class="control-label col-2 ms-auto text-right">确认密码</label>
              <div class="col-4 me-auto">
                  <input type="password" name="confirmPassword" class="form-control" v-model.trim="confirmPassword" />
              </div>
          </div>
          <div class=" row">
            <button id="btnChange" type="button" class="btn btn-primary btn-block col-4 offset-4" :disabled="changing" @click.stop="updatePassword()">保存修改</button>
          </div>
      </form>
    </div>
  </div>            
</template>

<script>
  import { APP_FLIGHT_PATH } from '../common/common.js'
  import { updatePassword } from '../api/user.js'

  export default {
    data () {
      return {
        curPassword: '',
        newPassword: '',
        confirmPassword: '',
        changing: false
      }
    },
    computed: {
      username () { return this.$store.state.username }
    },
    methods: {
      showErrMsg: function (msg, msgType) {
        this.$store.dispatch('showAlertMsg', { 'errMsg': msg, 'errMsgType': msgType })
      },
      updatePassword: function () {
        if (this.curPassword.length < 3) {
          this.showErrMsg('请输入当前密码, 密码不能少于3位字符')
          return
        }

        if (this.newPassword.length < 3) {
          this.showErrMsg('请输入新密码, 密码不能少于3位字符')
          return
        }

        if (this.newPassword !== this.confirmPassword) {
          this.showErrMsg('新密码和确认密码不一致')
          return
        }

        this.changing = true

        const params = {
          'currentPassword': this.curPassword,
          'newPassword': this.newPassword,
          'confirmPassword': this.confirmPassword
        }

        updatePassword(params, v => {
          if (v.status === 'OK') {
            this.showErrMsg('修改成功', 'success')
            this.reset()
          } else {
            this.showErrMsg(v.errmsg, 'danger')
            this.newPassword = ''
            this.confirmPassword = ''
          }
        }, () => {
          this.changing = false
        })
      },
      reset: function () {
        this.curPassword = ''
        this.newPassword = ''
        this.confirmPassword = ''
      }
    }
  }
</script>